<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'

// 使用 useRouter 获取路由实例
const router = useRouter()

const apiClient = axios.create({
  baseURL: 'https://localhost:1017/',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
})
// 获取作品列表
const getWork = async () => {
  try {
    // 从 sessionStorage 获取 token
    Token = sessionStorage.getItem("token");

    if (!Token) {
      console.error('Token not found');
      return;
    }

    const response = await apiClient.get('/works/getWork', {
      headers: {
        'Token': Token
      }
    });

    if (response.data.code === 200) {
      posts.value = response.data.data;
    } else {
      console.error('Failed to fetch works:', response.data.message);
    }
  } catch (error) {
    console.error('Error fetching works:', error);
  }
}

// 在组件挂载时调用
// onMounted(() => {
//   getWork();
// });

// 定义 Token 变量
let Token = '';

// 创建 axios 实例


// 添加请求拦截器
apiClient.interceptors.request.use(
    (config) => {
      // 在请求头中添加 Token
      config.headers['Token'] = Token;
      return config;
    },
    (error) => {
      return Promise.reject(error);
    }
)

// 定义响应式数据
const activeTab = ref('作品');
const tabs = ref(['作品', '赞过', '助手']);
const posts = ref({});
const userId = ref('');
const userInfo = ref({
  name: '',
  avatar: '',
  description: '',
  stats: {
    follows: 123,
    likeCount: 123,
    shareCount: '1.2万',
    energy: 123,
  },

});


const getUsers = () => {
  const usersData = sessionStorage.getItem('users');
  if (usersData) {
    userInfo.value = JSON.parse(usersData);
  } else {
    // 设置默认用户信息或处理无数据的情况
    userInfo.value = {
      name: '默认用户',
      avatar: '/images/default-avatar.jpg',
      stats: {
        energy: 0,
        follows: 0,
        fans: 0,
        likes: 0
      },
      description: '暂无描述'
    };
  }
}
// 定义方法
const goBack = () => {
  // 实现返回逻辑，例如返回上一页
  router.back();

};

const getToken = () => {
  Token = sessionStorage.getItem('phone');
};

const findAll = async () => {
  try {
    const res = await apiClient.get('http://localhost:10086/works/getWork');
    console.log(res.data.data);
    posts.value = res.data.data;
  } catch (error) {
    console.error('获取作品数据失败:', error);
  }
};
const ok = async (workId) => {
  sessionStorage.setItem('workId', workId);
  router.push('/auther')
  // console.log(workId)
}



// 在组件挂载时执行操作
onMounted(async () => {
  getWork();
  getToken();
  await findAll();
  getUsers();
});


// methods: {
//   findAssistant(functionId) {
//     axios.get(`http://localhost:10086/works/assistant/getAssistant/${functionId}`).then(res => {
//       console.log(11111111111111)
//       console.log(res.data.data);
//       res.data.data.forEach(post => {
//         post.isLiked = false;
//       });
//       this.assistant = res.data.data;
//       // this.assistant.length=this.assistant.length-1;
//     });
//   },
//   findAll(userId) {
//     axios.get(`http://localhost:10086/works/getWork?userId=${userId}`).then(res => {
//       console.log(res.data);
//       res.data.data.forEach(post => {
//         post.isLiked = false;
//       });
//       this.posts = res.data.data;
//     });
//   },
//   goBack() {
//     router.go(-1);
//   },
//   async likePost(post) {
//     try {
//       const apiUrl = post.isLiked
//           ? `http://localhost:10086/works/getUnLike?workId=${post.workId}`
//           : `http://localhost:10086/works/getLike?workId=${post.workId}`;
//
//       const res = await axios.post(apiUrl, {
//         workId: post.workId,
//         userId: this.userId
//       });
//
//       if (res.data.code === 200) {
//         this.$set(post, 'isLiked', !post.isLiked);
//         this.$set(post, 'likeCount', post.likeCount + (post.isLiked ? 1 : -1));
//
//         console.log('点赞状态更新:', {
//           workId: post.workId,
//           newState: post.isLiked,
//           newCount: post.likeCount
//         });
//       }
//     } catch (error) {
//       console.error('操作失败:', {
//         config: error.config,
//         response: error.response
//       });
//       alert(`操作失败: ${error.response?.data?.message || error.message}`);
//     }
//     }
// },
// created() {
//   this.findAll(this.userId);
//   this.findAssistant(this.functionId);
// };

</script>


<template>
  <div class="profile-page">
    <!-- 顶部状态栏 -->
    <div class="status-bar">
      <div class="left">
        <div class="back-btn" @click="goBack">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="back-icon">
            <path fill="white" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
          </svg>
        </div>
      </div>
      <div class="right">
        <div class="message-icon" style="margin-right: 16px;" @click="$router.push('/mess')">
          <div class="badge">99</div>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="white" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/>
          </svg>
        </div>
        <div class="settings-icon" @click="$router.push('/settings')">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="white" d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65z"/>
          </svg>
        </div>
      </div>
    </div>

    <!-- 用户信息 -->
    <div class="user-info">
      <div class="avatar">
        <img :src="userInfo.avatar" :alt="userInfo.name">
      </div>
      <h1 class="userId">{{ userInfo.userId }}</h1>
      <div class="home-tag" @click="this.$router.push('/energy')">
        <svg class="home-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path fill="white" d="M12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"/>
        </svg>
        能量 {{ userInfo.energy }}
        <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path fill="white" d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
        </svg>
      </div>
      <p class="description">{{ userInfo.description }}</p>
      <div class="stats">
        <div class="stat-item">
          <div class="number">{{ userInfo.follows }}</div>
          <div class="label">关注</div>
        </div>
        <div class="stat-item">
          <div class="number">{{ userInfo.likeCount }}</div>
          <div class="label">粉丝</div>
        </div>
        <div class="stat-item">
          <div class="number">{{ userInfo.likeCount }}</div>
          <div class="label">获赞</div>
        </div>
      </div>
      <!--      $router.push('/energy')-->
      <button class="follow-btn" @click="">
        获取能量
        <svg class="energy-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path fill="white" d="M11 21h-1l1-7H7.5c-.58 0-.57-.32-.38-.66.19-.34.05-.08.07-.12C8.48 10.94 10.42 7.54 13 3h1l-1 7h3.5c.49 0 .56.33.47.51l-.07.15C12.96 17.55 11 21 11 21z"/>
        </svg>
      </button>
    </div>

    <!-- 内容标签页 -->
    <div class="content-tabs">
      <div
          v-for="tab in tabs"
          :key="tab"
          class="tab"
          :class="{ active: activeTab === tab}"
          @click="activeTab = tab"
      >
        {{ tab }}
      </div>
    </div>

    <!-- 作品列表 -->
    <!-- 内容区域 -->
    <div class="content">
      <div v-if="activeTab === '作品'">
        <!-- 作品内容 -->

        <!-- 作品内容 -->
        <div class="posts-grid">
          <div v-for="post in posts" :key="post.id" class="post-card">
            <div class="post-image">
              <img :src="post.workImage" :alt="post.title">
              <div class="post-badge" v-if="post.id === 1">1</div>
            </div>
            <div class="post-content">
              <h3 class="post-title">{{ post.title }}</h3>
              <div class="post-footer">
                <div class="author">
                  <span class="post-image" @click="ok(post.workId)">{{ post.workTitle }}</span>
                </div>
                <img :src="post.workImage" :alt="post.name" class="author-avatar">
                <span class="author-name">{{ post.name }}</span>
                <div class="actions">
                  <div class="action-item">
                    <i class="like-icon">&#x2764;</i> <!-- Unicode 心形字符 -->
                    <span>{{ post.likeCount }}</span>
                  </div>

                  <div class="action-item">
                    <i class="share-icon"></i>
                    <span>{{ post.shareCount }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="activeTab === '赞过'">
        <!-- 赞过内容 -->
        <div class="posts-grid">
          <div v-for="post in posts" :key="post.id" class="post-card">
            <div class="post-image">
              <img :src="post.workImage" :alt="post.title" class="author-avatar">
              <div class="post-badge" v-if="post.id === 1">1</div>
            </div>
            <div class="post-content">
              <h3 class="post-title">{{ post.title }}</h3>
              <div class="post-footer">
                <div class="author">
                  <span class="post-image" @click="ok(post.workId)">{{ post.workTitle }}</span>
                </div>
                <img :src="post.workImage" :alt="post.name" class="author-avatar">
                <span class="author-name">{{ post.name }}</span>
                <div class="actions">
                  <div class="action-item">
                    <i class="like-icon">&#x2764;</i> <!-- Unicode 心形字符 -->
                    <span>{{ post.likeCount }}</span>
                  </div>

                  <div class="action-item">
                    <i class="share-icon"></i>
                    <span>{{ post.shareCount }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="activeTab === '助手'">
        <!-- 助手内容 -->
        <div class="posts-grid">
          <div v-for="post in assistant" :key="post.id" class="post-card">
            <div class="post-image">
              <img :src="post.image" :alt="post.title" class="author-avatar">
              <div class="post-badge" v-if="post.id === 1">1</div>
            </div>
            <div class="post-content">
              <h3 class="post-title">{{ post.title }}</h3>
              <div class="post-footer">
                <div class="author">
                  <span class="post-image" @click="ok(post.workId)">{{ post.workTitle }}</span>
                </div>
                <img :src="post.workImage" :alt="post.name" class="author-avatar">
                <span class="author-name">{{ post.name }}</span>
                <div class="actions">
                  <div class="action-item">
                    <i class="like-icon">&#x2764;</i> <!-- Unicode 心形字符 -->
                    <span>{{ post.likeCount }}</span>
                  </div>

                  <div class="action-item">
                    <i class="share-icon"></i>
                    <span>{{ post.shareCount }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>




<style scoped>
.profile-page {
  min-height: 100vh;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, #f5f5f5 300px),
  linear-gradient(90deg, #f5a8f0 0%, #7ecfff 100%);
}

.status-bar {
  padding: 48px 16px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.left, .right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.back-btn, .message-icon, .settings-icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.message-icon {
  position: relative;
}

.badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ff3b30;
  color: white;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  min-width: 16px;
  text-align: center;
  border: 2px solid white;
}

.user-info {
  padding: 0 20px;
  text-align: center;
  color: white;
}

.avatar {
  width: 80px;
  height: 80px;
  margin: 0 auto 12px;
}

.author-name {
  font-size: 12px;
  color: #666;
}

.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
}

.username {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.home-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 12px;
  border-radius: 16px;
  margin: 8px 0;
  font-size: 13px;
  backdrop-filter: blur(5px);
  cursor: pointer;
  transition: opacity 0.2s;
}

.home-icon, .arrow-icon {
  width: 16px;
  height: 16px;
}

.description {
  margin: 8px 0;
  font-size: 14px;
  opacity: 0.8;
}

.stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 16px 0;
}

.stat-item {
  text-align: center;
}

.number {
  font-size: 18px;
  font-weight: 600;
}

.label {
  font-size: 12px;
  opacity: 0.8;
}

.follow-btn {
  background: #007AFF;
  color: white;
  border: none;
  padding: 8px 32px;
  border-radius: 20px;
  font-size: 14px;
  margin: 16px auto;
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.energy-icon {
  width: 16px;
  height: 16px;
}

.content-tabs {
  display: flex;
  background: white;
  margin-top: 20px;
  border-radius: 20px 20px 0 0;
  padding: 12px 0;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  color: #666;
  font-size: 15px;
  position: relative;
  cursor: pointer;
}

.tab.active {
  color: #007AFF;
  font-weight: 500;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #007AFF;
}

.posts-grid {
  background: white;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.post-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.post-image {
  position: relative;
  width: 100%;
  padding-top: 100%;
}

.post-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.post-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #FFB800;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.settings-icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
  padding: 4px;
  transition: opacity 0.2s;
}

.settings-icon:active {
  opacity: 0.7;
}

.settings-icon svg {
  width: 100%;
  height: 100%;
}

.home-tag:active {
  opacity: 0.7;
}

.follow-btn:active {
  opacity: 0.7;
}

/* 其他样式保持不变 */
</style>

<!--export default {-->
<!--setup() {-->
<!--const activeTab = ref('作品');-->
<!--const tabs = ref(['作品', '赞过', '助手']);-->

<!--return {-->
<!--activeTab,-->
<!--tabs,-->
<!--};-->
<!--},-->
<!--data() {-->
<!--return {-->
<!--posts: {},-->
<!--userId:'',-->
<!--userInfo: {-->
<!--name: '',-->
<!--avatar: 'https://q2.itc.cn/images01/20240105/a677e375c1344b6cbc863bcf692417af.jpeg',-->
<!--description: '没个性，不签名...',-->
<!--stats: {-->
<!--follows: 123,-->
<!--likeCount: 123,-->
<!--shareCount: '1.2万',-->
<!--energy: 123-->
<!--}-->
<!--},-->
<!--};-->
<!--},-->
<!--methods: {-->

<!--goBack() {-->
<!--},-->
<!--// getToken(){-->
<!--//   Token = sessionStorage.getItem("phone");-->
<!--// }-->
<!--const findAll = () => {-->
<!--apiClient.get(`http://localhost:10086/works/getWork`).then(res => {-->
<!--console.log(res.data.data);-->
<!--this.posts = res.data.data;-->
<!--});-->
<!--}-->
<!--onMounted(() => {-->
<!--getToken();-->
<!--findAll();-->
<!--});-->
<!--},-->
<!--created(){-->


<!--// getToken();-->
<!--}-->
<!--};-->